<template>
  <div class="questions-table">
    <el-alert :title="'数据一共'+count+'条'" type="info" show-icon :closable="false">
    </el-alert>
    <!--   table 题库表格 -->
    <el-table class="table-margin" :data="tableQuestionsChoiceData" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column label="题型" width="120">
        <template v-slot="{row}">
          <span v-if="row.questionType === '1'">单选</span>
          <span v-else-if="row.questionType === '2'">多选</span>
          <span v-else>简答</span>
        </template>
      </el-table-column>
      <el-table-column label="题干" width="180">
        <template v-slot="{row}">
          <span v-html="row.question"></span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="180">
        <template v-slot="{row}">
          <span>{{ row.addDate | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="难度" width="80">
        <template v-slot="{row}">
          <span v-if="row.difficulty === '1'">简单</span>
          <span v-else-if="row.difficulty === '2'">一般</span>
          <span v-else>困难</span>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column label="审核状态" width="120">
        <template v-slot="{row}">
          <span v-if="row.chkState === 0">待审核</span>
          <span v-else-if="row.chkState === 1">已审核</span>
          <span v-else>已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column label="发布状态" width="150">
        <template v-slot="{row}">
          <span v-if="row.publishState === 1">待发布</span>
          <span v-else-if="row.publishState === 2">已发布</span>
          <span v-else>已下架</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template v-slot="{row}">
          <el-row type="flex" justify="space-around">
            <el-col class="label-color"><el-button type="text" @click="preview(row)">预览</el-button></el-col>
            <el-col class="label-color"><el-button type="text" :disabled="row.chkState === 0 ? false : true" @click="checkQuestion(row)">审核</el-button></el-col>
            <el-col class="label-color"><el-button type="text" :disabled="row.publishState === 2 ? true : false" @click="updateQuestion(row)">修改</el-button></el-col>
            <el-col class="label-color"><el-button type="text" @click="goUpOrDownQuestions(row)">{{ row.publishState === 2 ? '下架' : '上架' }}</el-button></el-col>
            <el-col class="label-color"><el-button type="text" :disabled="row.publishState === 2 ? true : false" @click="deleteQuestion(row)">删除</el-button></el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pagination-position" background @size-change="handleQuestionsSizeChange"
      @current-change="handleQuestionsCurrentChange" :current-page="questionForm.page"
      :page-sizes="[5, 10, 20, 50]" :page-size="questionForm.pagesize"
      layout=" prev, pager, next,sizes,jumper" :total="count">
    </el-pagination>
  </div>
</template>

<script>

import { parseTime } from '@/utils'
import { choicePublish, remove } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsTabel',
  props: {
    questionForm: {
      type: Object,
      required: true
    },
    count: {
      type: [Number, String],
      required: true
    },
    tableQuestionsChoiceData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {}
  },
  filters: {
    parseTime
  },
  methods: {
    // 处理页面变化
    handleQuestionsCurrentChange (newPage) {
      this.questionForm.page = newPage
      this.$emit('handler-pagination')
    },
    // 处理问题尺寸改变
    handleQuestionsSizeChange (newSize) {
      this.questionForm.pagesize = newSize
      this.$emit('handler-pagination')
    },
    // 点击预览
    preview (row) {
      this.$emit('handler-preview', row)
    },
    // 审查
    checkQuestion (row) {
      this.$emit('handler-check', row)
    },
    // 修改
    updateQuestion (row) {
      this.$emit('handler-update', row)
    },
    // 上架
    async goUpOrDownQuestions (row) {
      const title = row.publishState === 2 ? '下架' : '上架'
      const result = await this.$confirm(`您确认${title}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result === 'confirm') {
        try {
          await choicePublish({
            id: row.id,
            publishState: row.publishState === 2 ? 3 : 2
          })
          this.$message.success('操作成功')
          this.$emit('handler-godown')
        } catch (error) {
          this.$message.error(`${title}商品失败`)
        }
      }
    },
    // 删除
    async deleteQuestion (row) {
      const result = await this.$confirm('此操作将永久删除该题目，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result === 'confirm') {
        try {
          if (this.tableQuestionsChoiceData.length === 1) {
            this.questionForm.page = this.questionForm.page === 1 ? 1 : this.questionForm.page - 1
          }
          await remove({
            id: row.id
          })
          this.$message.success('删除成功')
          this.$emit('handler-delete')
        } catch (error) {

        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.questions-table {
      .label-color {
    text-align: center;
    font-size: 12px;
    color: #409eff;
    cursor: pointer;
  }
    .pagination-position {
    text-align: right;
    /deep/.el-pagination__jump {
      margin-left: unset;
    }
  }
   .table-margin {
    margin: 15px 0;
  }
}
</style>
